<template>
  <div class="shop">

    <el-button size="small"
      type="primary"
      @click='exportIncomeData'>导出数据</el-button>
    <!-- <el-button-group class="btn-group">
      <el-button size='small'
        @click="changeStatus(0)">全部</el-button>
      <el-button size='small'
        @click="changeStatus(7)">近7天</el-button>
      <el-button size='small'
        @click="changeStatus(15)">近15天</el-button>
      <el-button size='small'
        @click="changeStatus(30)">近30天</el-button>
    </el-button-group> -->

    <el-date-picker v-model="form.start_time"
      class="picker"
      type="date"
      style="width:142px"
      size='small'
      value-format="yyyy-MM-dd"
      placeholder="选择开始时间"> 
    </el-date-picker> ~ <el-date-picker v-model="form.end_time"
      type="date"
      style="width:142px"
      value-format="yyyy-MM-dd"
      size='small'
      placeholder="选择结束时间"></el-date-picker>

    <el-select v-model="form.order_type" size='small'
    class="detail_select"
      placeholder="订单类型">
      <el-option label="全部"
        value=""></el-option>
      <el-option label="爆款商品"
        value="1"></el-option>
      <el-option label="现金券"
        value="5"></el-option>
         <el-option label="拼团"
        value="10"></el-option>
         <el-option label="会员专享商品"
        value="15"></el-option>
         <el-option label="优惠买单"
        value="20"></el-option>
         <el-option label="普通商品"
        value="25"></el-option>
    </el-select>
    <el-select v-model="form.is_reconcile_account" size='small'
    class="detail_select"
      placeholder="对账状态">
      <el-option label="全部"
        value=""></el-option>
      <el-option label="已对账"
        value="1"></el-option>
      <el-option label="未对账"
        value="5"></el-option>
    </el-select>
    <!--搜索-->
    <div class="search">
      <el-input class="input"
        size='small'
        v-model="form.shop_name"
        placeholder="输入小店名称搜索"
        clearable></el-input>
      <el-button type="primary"
        size='small'
        @click="searchIncome">搜索</el-button>
    </div>

    <el-table :data="tableData"
      style="width:100%"
      max-height="600"
      class="incomtable"
      :cell-style="tc"
      :header-cell-style="tccolor">
      <el-table-column label='时间'
        width='160'
        prop='created_at'></el-table-column>
      <el-table-column label='类型 | 收支流水号'
        width='240'>
        <template slot-scope="scope">
          <p>{{scope.row.order_type}} {{scope.row.order_no}}</p>
          <!-- <p v-if='scope.row.order_type==5'>现金券 {{scope.row.order_no}}</p>
          <p v-if='scope.row.order_type==10'>拼团 {{scope.row.order_no}}</p>
          <p v-if='scope.row.order_type==15'>会员专享商品 {{scope.row.order.order_no}}</p>
          <p v-if='scope.row.order_type==20'>优惠买单 {{scope.row.order_no}}</p>
          <p v-if='scope.row.order_type==25'>普通商品 {{scope.row.order_no}}</p> -->
        </template>
      </el-table-column>
      <el-table-column label='所属小店'
        width='140'
        prop='shop_name'></el-table-column>
      <el-table-column label='收入（元）'>
        <template slot-scope="scope">
          ¥ {{scope.row.actual_amount}}
        </template>
      </el-table-column>
      <el-table-column label='入账（元）'>
        <template slot-scope="scope">
          ¥ {{scope.row.settle_account}}
        </template>
      </el-table-column>
      <el-table-column label='支付渠道 | 单号'
        width='220'>
        <template slot-scope="scope">
          <p>{{scope.row.pay_method}} {{scope.row.out_order_no}}</p>
  
        </template>
      </el-table-column>
      <el-table-column label='对账状态'>
        <template slot-scope="scope">
          <p v-if='scope.row.check_status ==1'>已对账</p>
          <p v-if='scope.row.check_status ==5'>未对账</p>
        </template>
      </el-table-column>
      <el-table-column label='操作'
        fixed='right' width='160'>
        <template slot-scope="scope">
          <el-button size='mini'
            type='danager'
            @click="openIncome(scope.row.id, scope.row.shop_name)">详情</el-button>
            <el-button size='mini'
            type='primary'
            @click="openDuizhang(scope.row.id,scope.row.check_status, scope.row.shop_name)">对账</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-col :span="24">
      <div class="pagination">

        <el-pagination background
          @current-change="pageChange"
          :current-page="form.page"
          :page-size="20"
          layout="total, prev, pager, next, jumper"
          :total="total"></el-pagination>
      </div>
    </el-col>

    <jdialog title="小店收入详情（线下）"
      :visible.sync="isShowIncomeDetail"
      width="800px">
      <incomeline-detail :visible="isShowIncomeDetail"
        :currentId="currentId"
        :shopName="shopName"
        @close="isShowIncomeDetail = false"
        @func="cancelShowRecordDetail"></incomeline-detail>
    </jdialog>

      <jdialog title="小店订单详情"
      :visible.sync="isShowDZdetail"
      width="800px">
      <duizhangdetail :visible="isShowDZdetail"
        :currentId="currentId"
        :shopName="shopName"
        :status='check_status'
        @close="isShowDZdetail = false"
        @func="cancelShowDzDetail"></duizhangdetail>
    </jdialog>
  </div>
</template>

<script>
import incomelineDetail from './income_inlinedetail'
import duizhangdetail from './duizhangdetail';
import { shopIncomesData } from "@/api/finance"
import { API_BASE_URL } from "@/config";
export default {
  components: {
    incomelineDetail,
    duizhangdetail
  },
  data () {
    return {
      isShowIncomeDetail: false,
      isShowDZdetail:false,
      check_status :'',
      currentId: '',
      shopName:'',
      form: {
        page: 1,
        type: 2, //2 线下
        start_time: '',
        end_time: '',
        shop_name: '',
        is_reconcile_account: '', //1 已对账 5未对账
        order_type:'0',
        isExport:''
      },
      total: 0,
      tableData: []
    }
  },
  mounted () {
    this.getshopIncomesData()
  },
  methods: {

    async getshopIncomesData () {
      if(this.form.order_type == '0'){
        this.form.order_type = ''
      }
      var url = 'page=' + this.form.page +
        '&shop_name=' + this.form.shop_name +
        '&is_reconcile_account=' + this.form.is_reconcile_account +
        '&type=' + this.form.type +
        '&order_type=' + this.form.order_type +
        '&is_export=' + this.form.isExport
        if(this.form.start_time) {
        url += '&start_time=' + this.form.start_time
      }
      if(this.form.end_time) {
        url += '&end_time=' + this.form.end_time
      }
      let res = await shopIncomesData(url)
      if (res.code !== 10000) {
        this.form.isExport = ''
        this.$message.error(res.message) 
        return
      }
      if(this.form.isExport === 1) {
        this.form.isExport = ''
        window.open(
          `${API_BASE_URL}/admin/download/zip/${res.data[1].download_token}`
        );
        return;
      }
      this.tableData = res.data.data;
      this.total = res.data.total;

    },
    // changeStatus (day) {
    //   console.log(day)
    //   this.form.status = day
    // },
    exportIncomeData () {
       this.form.isExport = 1
      this.getshopIncomesData()
    },
    searchIncome () {
       this.form.page = 1;
      this.getshopIncomesData()
    },
    pageChange (page) {
          this.form.page = page;
      this.getshopIncomesData();
    },

    openIncome (id, shopName) {
      this.currentId = id;
      this.shopName = shopName
      this.isShowIncomeDetail = true;
    },
    openDuizhang(id, status, shopName){
      this.currentId = id;
      this.shopName = shopName
      this.isShowDZdetail = true;
      this.check_status = status
    },
    cancelShowRecordDetail () {
      this.isShowIncomeDetail = false;
    },
    cancelShowDzDetail(){
      this.isShowDZdetail = false
      this.getshopIncomesData()
    },
    tc () {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor () {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },
  },



}
</script>

<style lang="scss" scoped>
.shop {
  padding: 20px;
  .btn-group {
    margin: 0 12px;
  }
  .search {
    float: right;
    .input {
      width: 160px;
      margin-right: 2px;
    }
  }
  .pagination {
    float: right;
    margin-top: 15px;
  }
  .incomtable {
    margin-top: 20px;
  }
  .picker{
   margin-left: 12px;
  }
  .detail_select{
    margin-left: 12px;
    width: 140px;
  }
}
</style>